<script setup lang="ts">
import DeviceTable from '@/components/DeviceTable.vue'
import VideoItem from '@/components/VideoItem.vue'
import { searchInfraredMissionListApi, getInfraredMissionDetailApi } from '@/api/infrared'
import emitter from '@/utils/eventBus'
import { ref, watch, reactive, inject, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import fixTime from '@/utils/fixTime'
import { formatTime } from '@/utils/common'

const props = defineProps({
  yard: {
    type: Number,
    default: 0
  },
  canvasId: {
    type: String,
    default: ''
  },
  showInfraredItemDialog: {
    type: Function,
    // eslint-disable-next-line @typescript-eslint/no-empty-function
    default: () => {}
  }
})

// 定义变量

// 定义方法
onMounted(() => {
  emitter.on('FlameCoalData', getInfraredData)
})

// 展示弹框
const showInfrarTable = () => {
  console.log('展示弹框----->', props.yard)
  props.showInfraredItemDialog(props.yard, props.canvasId)
}

// 获取红外报警信息
const getInfraredData = (FlameCoalData: any) => {
  // console.log('连接状态数据----->', FlameCoalData)
}

// 引入依赖
const showIcon: any = inject('showIcon')
interface alarmDataIntef {
  CO: string,
  O2: string,
  SO2: string,
  CH4: string,
  smoke: string,
  dust: string,
  infrared: string,
  CO2: string,
  O22: string,
  SO22: string,
  CH42: string,
  smoke2: string,
  dust2: string,
  infrared2: string
}
const alarmData: alarmDataIntef = inject('alarmData') as alarmDataIntef
</script>
<template>
  <div class="infrar-item-main-box">
    <div
      v-show="showIcon.infrared && (alarmData.infrared > '0')"
      id="infaredFirstary"
      class="infrar-box iconfont icon-hongwai1"
      @click.stop="showInfrarTable"
    />
    <div
      v-show="showIcon.infrared && (alarmData.infrared < '0')"
      id="infaredSecondary"
      class="infrar-box iconfont icon-jianzhuanquan-"
      @click.stop="showInfrarTable"
    />
    <div
      v-show="showIcon.infrared"
      :id="true ? '' : (false ? 'infaredFirstary' : 'infaredSecondary')"
      :class="(true ? 'circle-box iconfont icon-yuanquan' : 'circle-box iconfont icon-circleyuanquan')"
      @click.stop="showInfrarTable"
    />
  </div>
</template>

<style lang="scss">
.infrar-item-main-box {
  width: 34px;
  height: 60px;
  background: none;

  /* border: 1px solid red; */
  opacity: 1;
  .infrar-box {
    height: 32px;
    margin-top: 3px;
    color: #ee7200ff;
    text-align: center;
  }
  .circle-box {
    width: 24px;
    height: 24px;
    margin-top: 2px;
    margin-left: 4px;
    line-height: 24px;
    text-align: center;

    /* background: linear-gradient(180deg, #EE7200 0%, #FFB775 100%); */
    background: #ffeddcff;
    border-radius: 24px;
    box-shadow: 0 2px 4px 0 #bbd2ff;
    opacity: 1;
  }
  .info-main-box {
    /* border: 1px solid red; */
    .video-box {
      display: flex;
      justify-content: space-between;
      > div {
        display: flex;
        flex-wrap: wrap;
        width: 474px;
        height: 262px;
        >div {
          width: 153px;
          height: 126px;
          margin-left: 3px;

        /* border: 1px solid red; */
        }
      }
    }
    .real-time-monitor {
      display: flex;
      width: 100%;
      height: 262px;

      /* border: 1px solid red; */
      >div {
        display: flex;
        flex-wrap: wrap;
        width: 50%;
        height: 100%;

        /* border: 1px solid blue; */
       >div {
          width: 153px;
          height: 126px;
          margin-left: 3px;
          border: 1px solid green;
          >canvas {
            width: 153px;
            height: 126px;
          }
        }
      }
    }
    .filter-box {
      display: flex;
      justify-content: space-between;
      height: 32px;
      margin-top: 24px;

      /* border: 1px solid red; */
      .date-picker-box {
        width: 400px;
      }
            .btn-box {
              display: flex;
              align-items: center;
              margin-left: 30px;
              >div {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 50px;
                height: 30px;
                margin-top: 6px;
                font-weight: 600;
                font-size: 14px;
                font-family: PingFang, sans-serif;
                line-height: 20px;
                text-align: center;
                background-clip: text;
                border: 1px solid #1D41FF;
              }
              .search-btn {
                color: #fff;
                background: #1D41FF;
              }
              .search-btn:hover {
                cursor: pointer;
              }
              .clear-btn {
                width: 50px;
                margin-left: 15px;
              }
              .clear-btn:hover {
                color: #fff;
                background: #1D41FF;
                cursor: pointer;
              }
            }
      .icon-divider {
        width: 0 !important;
        height: 12px !important;
        margin-top: 10px !important;
        border: 1px solid #A9AEB8 !important;
      }
    }
    .device-table {
      width: 957px;
      height: 330px;
      margin-top: 16px;

      /* border: 1px solid red; */
    }
    .pagination-box {
      display: flex;
      justify-content: end;
      height: 30px;

      /* margin-top: 16px; */
      text-align: end;
    }
  }
  #infaredSecondary {
    transform: rotate(-180deg);
  }
}
.infrar-item-main-box:hover {
  cursor: pointer;
}
</style>
<style lang="scss">
.infrar-dialog {
  width: 1000px;
  height: 760px;
  .infrar-header-box {
    .title {
      width: 120px;
      height: 28px;
      padding-left: 15px;
      color: #4e5969;
      font-weight: 600;
      font-size: 20px;
      font-family: PingFang,sans-serif;
      line-height: 23px;
      background-clip: text;
    }
  }
  .el-dialog__body {
    height: 630px;
    padding-top: 0;

    /* border: 1px solid red; */
  }
}
.infrar-state,
.infrar-posi,
.infrar-time {
  width: 200px;
  height: 32px;

  /* border: 1px solid red; */
}
.infrar-posi,
.infrar-time {
  margin-left: 16px;
}
.device-page {
  /* margin-left: 615px; */
}

</style>
